<template>
  <div class="container">

    <el-dialog
      title="预览文章"
      :visible.sync="showPreview"
      width="60%"
      @close="close"
    >
      <div>
        <h1>{{ detail.title }}</h1>
        <span class="preview">{{ detail.createTime | time }} </span>
        <span class="preview">{{ detail.creatorID }}</span>
        <i class="el-icon-view" />
        <span class="preview">{{ detail.visits }}</span>
        <div class="detail" v-html="detail.articleBody" />
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import hiretype from '@/api/base/baseApi'
export default {
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showPreview: false,
      role: hiretype.role
    }
  },

  methods: {
    close() {
      this.showPreview = false
    }
  }

}
</script>

<style scoped lang='scss'>
.preview{
  margin: 0 7px;
}
.detail {
  padding: 15px 10px;

}
</style>
